<template>
  <div class="flex-row">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
          <span v-if="index===0" class="no-redirect">当前位置：</span>
          <span :class="[
          'no-redirect',
          index==levelList.length-1 ? 'active' : ''
          ]">{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <el-button size="small" v-if="isShowBack" @click="back">返回</el-button>
  </div>

</template>

<script>

export default {
  data () {
    return {
      levelList: null
    }
  },
  props: {
    isShowBack: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  created () {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb () {
      this.levelList = this.$route.matched.filter(item => item.meta && item.meta.title)
    },
    back () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: block;
  font-size: 14px;
  line-height: 50px;
  width: 1000px;
  .location {
    color: #5266eb;
    vertical-align: top;
  }
  .no-redirect {
    color: #91959A;
    font-size: 14px;
    cursor: text;
  }
  .active {
    color: #101D37;
  }
}
</style>
